<template>
	<navigator class="search-item" :url="'../detail/detail?id='+item.skuId">
		<view class="left_pic">
			<image :src="item.image" mode=""></image>
		</view>
		<view class="conter_info">
			<view class="title">{{item.name}}</view>
			<view class="btns">
				<text class="salePrice">￥{{item.price / 100}}</text>
				<text class="labal" v-if="item.foi">免息</text>
				<text class="labal" v-if="item.activityList">赠</text>
				<text class="price">￥{{item.srp / 100}}</text>
			</view>
		</view>
		<view class="right_cart" @click.stop.prevent="addToCart">
			<image src="../../static/images/cart-min.png" mode=""></image>
		</view>
	</navigator>
</template>

<script setup>
	const {
		item
	} = defineProps({
		item: {
			typeof: Object,
		}
	})
	// 导入接口
	import {
		addCart
	} from "../../api/auth.js"
	// 加入购物车
	function addToCart() {
		addCart({
			skuId: item.skuId,
			buyNumber: 1,
			is_tc: false
		}).then(res => {
			uni.showToast({
				title: "添加购物车成功"
			})
		})
	}
</script>

<style lang="scss">
	.search-item {
		position: relative;
		margin: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;

		// 左
		.left_pic {
			padding: 15rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		// 中
		.conter_info {
			flex: 1;

			.title {
				margin-top: 30rpx;
				margin-bottom: 15rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 800;
			}

			.salePrice {
				font-weight: 900;
				color: #f30;
			}

			.price {
				color: #999;
				text-decoration: line-through;
				font-size: 22rpx;
			}

			.labal {
				display: inline-block;
				font-size: 20rpx;
				border: 1rpx solid #36f;
				color: #36f;
				line-height: 1;
				padding: 5rpx 3rpx;
				margin: 0 10rpx;
			}
		}

		// 右
		.right_cart {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>